<template>
  <div class="site-stats">
    <h2 class="section-title">网站访问统计</h2>
    
    <div class="stats-cards">
      <el-card class="stats-card">
        <div class="stats-card-content">
          <div class="stats-icon pv-icon">
            <el-icon><View /></el-icon>
          </div>
          <div class="stats-info">
            <div class="stats-label">访问人次 (PV)</div>
            <div class="stats-value">{{ stats.pv }}</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="stats-card">
        <div class="stats-card-content">
          <div class="stats-icon uv-icon">
            <el-icon><User /></el-icon>
          </div>
          <div class="stats-info">
            <div class="stats-label">访问人数 (UV)</div>
            <div class="stats-value">{{ stats.uv }}</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="stats-card">
        <div class="stats-card-content">
          <div class="stats-icon time-icon">
            <el-icon><Timer /></el-icon>
          </div>
          <div class="stats-info">
            <div class="stats-label">更新时间</div>
            <div class="stats-value">{{ stats.updateTime }}</div>
          </div>
        </div>
      </el-card>
    </div>
    
    <div class="stats-actions">
      <el-button type="primary" @click="refreshStats">
        <el-icon class="mr-2"><RefreshRight /></el-icon>
        刷新统计数据
      </el-button>
    </div>
    
    <div class="stats-chart">
      <h3 class="chart-title">访问趋势</h3>
      <div class="chart-container">
        <!-- 这里可以添加图表组件，如ECharts等 -->
        <div class="chart-placeholder">
          <el-empty description="暂无趋势数据">
            <template #image>
              <el-icon class="empty-icon"><DataLine /></el-icon>
            </template>
          </el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { View, User, Timer, RefreshRight, DataLine } from '@element-plus/icons-vue';

// 统计数据
const stats = reactive({
  pv: '-',
  uv: '-',
  updateTime: new Date().toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
});

// 刷新统计数据
const refreshStats = () => {
  updateStats();
  
  ElMessage({
    type: 'success',
    message: '统计数据已刷新'
  });
};

// 更新统计数据
const updateStats = () => {
  // 直接从页面元素获取统计数据
  const pvElement = document.getElementById('page_pv');
  const uvElement = document.getElementById('page_uv');
  
  if (pvElement) {
    stats.pv = pvElement.innerText || '-';
  }
  
  if (uvElement) {
    stats.uv = uvElement.innerText || '-';
  }
  
  // 更新时间
  stats.updateTime = new Date().toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  });
};

// 组件挂载时
onMounted(() => {
  // 初始延迟，等待统计脚本加载完成
  setTimeout(() => {
    updateStats();
  }, 1500);
});
</script>

<style scoped>
.site-stats {
  padding: 1rem;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stats-card {
  transition: all 0.3s ease;
}

.stats-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.stats-card-content {
  display: flex;
  align-items: center;
  padding: 0.5rem;
}

.stats-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  color: white;
  font-size: 1.5rem;
}

.pv-icon {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.uv-icon {
  background: linear-gradient(135deg, #f97316, #fb923c);
}

.time-icon {
  background: linear-gradient(135deg, #10b981, #34d399);
}

.stats-info {
  flex: 1;
}

.stats-label {
  color: #6b7280;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.stats-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
}

.stats-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2rem;
}

.stats-chart {
  margin-top: 2rem;
}

.chart-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 1rem;
}

.chart-container {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-icon {
  font-size: 3rem;
  color: #d1d5db;
}

@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
}
</style> 